import { fetchRecommendAction } from "@/store/modules/recommend";
import React, { memo, useEffect } from "react";
import { shallowEqual, useDispatch, useSelector } from "react-redux";
import HotAnchor from "./c-cpns/hot-anchor";
import HotRecommend from "./c-cpns/hot-recommend";
import NewAlbum from "./c-cpns/new-album";
import RecommendRanking from "./c-cpns/recommend-ranking";
import SettleSinger from "./c-cpns/settle-singer";
import TopBanner from "./c-cpns/top-banner";
import UserLogin from "./c-cpns/user-login";
import {
  Content,
  RecommendLeft,
  RecommendRight,
  RecommendWrapper,
} from "./style";

const Recommend = memo(() => {
  const {
    topBanners,
    hotRecommends,
    newAlbums,
    rankings,
    artistLists,
    topListPopular,
  } = useSelector(
    (state) => ({
      topBanners: state.recommend.topBanners,
      hotRecommends: state.recommend.hotRecommends,
      newAlbums: state.recommend.newAlbums,
      rankings: state.recommend.rankings,
      artistLists: state.recommend.artistLists,
      topListPopular: state.recommend.topListPopular,
    }),
    shallowEqual
  );
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(fetchRecommendAction());
  }, [dispatch]);
  return (
    <RecommendWrapper>
      {/* 轮播图 */}
      <TopBanner topBanners={topBanners} />
      <Content className="wrap-v2">
        <RecommendLeft>
          {/* 热门推荐 */}
          <HotRecommend hotRecommends={hotRecommends} />
          {/* 新碟上架 */}
          <NewAlbum newAlbums={newAlbums} />
          {/* 榜单 */}
          <RecommendRanking rankings={rankings} />
        </RecommendLeft>
        <RecommendRight>
          {/* 登录 */}
          <UserLogin />
          {/* 入驻歌手 */}
          <SettleSinger artistLists={artistLists} />
          {/* 热门主播 */}
          <HotAnchor topListPopular={topListPopular} />
        </RecommendRight>
      </Content>
    </RecommendWrapper>
  );
});

export default Recommend;
